import React, {FC, useEffect} from "react";
import {Link, useNavigate} from "react-router-dom";
import {useRequest} from "ahooks";
import {getUserInfoService} from "../services/user";
import {UserOutlined} from "@ant-design/icons";
import {Button, message} from "antd";
import {removeToken} from "../utils/user-token";
import {LOGIN_PATH} from "../router";
import useGetUserInfo from "../hooks/useGetUserInfo";
import {useDispatch} from "react-redux";
import {logoutReducer} from "../store/userRreducer";

const Userinfo: FC = () => {

    // const {data} = useRequest(getUserInfoService)
    // const {username, nickname} = data || {}

    const {username, nickname} = useGetUserInfo()

    const nav = useNavigate()

    const dispatch = useDispatch()


    function logout() {
        dispatch(logoutReducer())
        removeToken()
        message.success('退出成功')
        nav(LOGIN_PATH)
    }

    const UserInfo = (
        <>
        <span style={{color: '#e8e8e8'}}>
            <UserOutlined/>
            {nickname || username}
        </span>
            <Button type="link" onClick={logout}> 退出</Button>
        </>
    )

    const Login = (
        <Link to="/login">
            登录
        </Link>
    )

    return (
        <div>
            {username ? UserInfo : Login}
        </div>
    )
}
export default Userinfo